<template>
  <el-drawer :title="id?'修改':'添加'" :before-close="cancel" :visible.sync="value" direction="rtl">
    <div class="demo-drawer__content">
      <el-form :model="drawerForm" :rules="rules" ref="drawerForm" label-width="80px">
        <el-form-item label="角色名称" prop="rname">
          <el-input v-model="drawerForm.rname" size="small" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色编码" prop="rcode">
          <el-input v-model="drawerForm.rcode" size="small" placeholder="请输入角色编码"></el-input>
        </el-form-item>
        <el-form-item label="角色状态" size="small">
          <el-switch
            v-model="drawerForm.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
        <el-form-item label="角色描述" prop="descript">
          <el-input
            type="textarea"
            v-model="drawerForm.descript"
            size="small"
            placeholder="请输入角色描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancel" size="small">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
          size="small"
          :loading="loading"
        >{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { save, update } from "@/api/role";
export default {
  name: "roleAddAndUpddate",
  components: {},
  props: {
    value: Boolean
  },
  data() {
    return {
      id: null,
      loading: false,
      drawerForm: {
        rname: "",
        rcode: "",
        status: 1,
        descript: ""
      },
      rules: {
        rname: [
          { required: true, message: "角色名称不能为空", trigger: "blur" }
        ],
        rcode: [
          { required: true, message: "角色编码不能为空", trigger: "blur" },
          {
            trigger: "blur",
            validator: (rule, value, callback) => {
              const regx = /\w+/;
              if (!regx.test(value)) {
                callback(
                  new Error("角色编码不符合规格【小写字母|数字|下划线组成】")
                );
              } else {
                callback();
              }
            }
          }
        ],
        descript: [
          { required: true, message: "角色描述不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    init(row) {
      this.id = row.id;
      if (this.id) {
        this.drawerForm.id = row.id;
        this.drawerForm.rname = row.rname;
        this.drawerForm.rcode = row.rcode;
        this.drawerForm.status = row.status;
        this.drawerForm.descript = row.descript;
      }
    },
    submit() {
      this.$refs["drawerForm"].validate(async isOk => {
        if (isOk) {
          if (this.id) {
            this.drawerForm.id = this.id;
            await update(this.drawerForm);
          } else {
            await save(this.drawerForm);
          }
          // 重新刷新数据
          this.$emit("refresh");
        }
      });
    },
    cancel() {
      this.$refs["drawerForm"].resetFields();
      this.$emit("input", false);
    }
  }
};
</script>

<style lang="scss" scoped>
.demo-drawer__footer {
  text-align: center;
}
</style>